<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件查看器 - Rust-Cool-Nginx</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .navbar {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            background: rgba(30, 30, 40, 0.7);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(0, 255, 255, 0.2);
            border-radius: 10px;
            margin: 20px;
        }

        .navbar > .container {
            display: flex;
            flex-wrap: inherit;
            align-items: center;
            justify-content: space-between;
        }

        .navbar-brand {
            padding-top: 0.3125rem;
            padding-bottom: 0.3125rem;
            margin-right: 1rem;
            font-size: 1.25rem;
            text-decoration: none;
            white-space: nowrap;
            font-weight: 700;
            color: var(--primary);
            background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .navbar-nav {
            display: flex;
            flex-direction: row;
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;
        }

        .nav-link {
            display: block;
            padding: 0.5rem 1rem;
            color: #ccc;
            text-decoration: none;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
        }

        .nav-link:hover, .nav-link:focus {
            color: var(--primary);
        }

        .navbar-nav .nav-link.active {
            color: var(--primary);
            background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .navbar-collapse {
            flex-basis: 100%;
            flex-grow: 1;
            align-items: center;
        }

        .navbar-toggler {
            padding: 0.25rem 0.75rem;
            font-size: 1.25rem;
            line-height: 1;
            background-color: transparent;
            border: 1px solid transparent;
            border-radius: 0.375rem;
            transition: box-shadow 0.15s ease-in-out;
        }

        .hero {
            text-align: center;
            padding: 30px 0;
            margin: 20px 0 30px 0;
            background: rgba(30, 30, 40, 0.7);
            border: 1px solid rgba(0, 255, 255, 0.2);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .hero h1 {
            font-size: 2.5rem;
            background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 10px;
            text-shadow: 0 0 20px rgba(0, 219, 222, 0.3);
            letter-spacing: 2px;
        }

        .file-info {
            background: rgba(30, 30, 40, 0.7);
            border: 1px solid rgba(0, 255, 255, 0.2);
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .file-content-container {
            background: rgba(30, 30, 40, 0.7);
            border: 1px solid rgba(0, 255, 255, 0.2);
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .file-content {
            background: #1e1e1e;
            padding: 15px;
            border-radius: 5px;
            overflow: auto;
            max-height: 500px;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
        }

        .btn {
            display: inline-block;
            font-weight: 400;
            line-height: 1.5;
            color: var(--bs-body-color);
            text-align: center;
            text-decoration: none;
            vertical-align: middle;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            background-color: transparent;
            border: 1px solid transparent;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            border-radius: 0.375rem;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .btn-primary {
            color: var(--bs-white);
            background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
            border: none;
        }

        .btn-primary:hover {
            color: var(--bs-white);
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(0, 219, 222, 0.4);
        }

        footer {
            background: rgba(30, 30, 40, 0.7);
            padding: 3rem 0;
            text-align: center;
            border-top: 1px solid rgba(0, 255, 255, 0.2);
            margin-top: 30px;
        }

        footer p {
            color: #777;
            margin: 0;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="container">
            <a class="navbar-brand" href="index.html">Rust-Cool-Nginx</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span>Menu</span>
            </button>
            <div class="navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="config.html">配置</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="status.html">监控</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="static-file.html">静态文件</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <section class="hero">
        <div class="container">
            <h1>文件查看器</h1>
            <p>查看服务器上的静态文件内容</p>
        </div>
    </section>

    <div class="container">
        <div class="file-info">
            <h2 id="file-path">文件路径: </h2>
            <p>文件大小: <span id="file-size">0</span> 字节</p>
            <button id="back-btn" class="btn btn-primary" onclick="history.back()">返回</button>
        </div>

        <div class="file-content-container">
            <h3>文件内容:</h3>
            <div id="file-content" class="file-content">
                正在加载文件内容...
            </div>
        </div>
    </div>

    <footer>
        <div class="container">
            <p>© 2025 Rust-Cool-Nginx - 高性能 Web 服务器 | 基于 Rust 和 Tokio 构建</p>
        </div>
    </footer>

    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 从URL参数获取文件路径
            const urlParams = new URLSearchParams(window.location.search);
            const filePath = urlParams.get('file');
            
            if (filePath) {
                document.getElementById('file-path').textContent = '文件路径: ' + filePath;
                loadFileContent(filePath);
            } else {
                document.getElementById('file-content').textContent = '未指定文件路径';
            }
        });

        // 加载文件内容
        function loadFileContent(filePath) {
            let fileUrl;
            if (window.location.origin === 'http://tauri.localhost') {
                // 在 Tauri 环境中，后端运行在 127.0.0.1:80
                fileUrl = 'http://127.0.0.1:80' + filePath;
            } else {
                // 在 Web 环境中，使用当前域名和端口
                fileUrl = window.location.origin + filePath;
            }
            fetch(fileUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok, status: ' + response.status);
                    }
                    return response.text();
                })
                .then(data => {
                    document.getElementById('file-size').textContent = data.length;
                    document.getElementById('file-content').textContent = data;
                })
                .catch(error => {
                    document.getElementById('file-content').textContent = '加载文件失败: ' + error.message;
                });
        }
    </script>
</body>
</html>